<template>
    <div class="login-container">
        <div class="login-content">
            <div class="login-header">
                <div class="logo-container">
                    <img src="../assets/logo.svg" alt="Logo" class="logo" />
                    <h1 class="system-name">管理后台</h1>
                </div>
                <div class="login-welcome">欢迎登录</div>
            </div>

            <t-form ref="form" :data="formData" :rules="rules" label-width="0" @submit="onSubmit">
                <t-form-item name="username">
                    <t-input v-model="formData.username" size="large" placeholder="请输入用户名" :maxlength="20">
                        <template #prefix-icon>
                            <t-icon name="user" />
                        </template>
                    </t-input>
                </t-form-item>

                <t-form-item name="password">
                    <t-input v-model="formData.password" size="large" type="password" placeholder="请输入密码"
                        :maxlength="20" clearable>
                        <template #prefix-icon>
                            <t-icon name="lock-on" />
                        </template>
                    </t-input>
                </t-form-item>

                <div class="login-options">
                    <t-checkbox v-model="formData.remember">记住我</t-checkbox>
                    <t-link theme="primary" hover="color" size="small">忘记密码？</t-link>
                </div>

                <t-form-item>
                    <t-button block type="submit" theme="primary" size="large" :loading="loading">
                        登录
                    </t-button>
                </t-form-item>

                <div class="login-divider">
                    <t-divider align="center">其他登录方式</t-divider>
                </div>

                <div class="other-login-methods">
                    <t-space>
                        <t-tooltip content="微信登录">
                            <t-button variant="text" shape="square" size="large">
                                <t-icon name="logo-wechat-stroke" size="24px" />
                            </t-button>
                        </t-tooltip>
                        <t-tooltip content="QQ登录">
                            <t-button variant="text" shape="square" size="large">
                                <t-icon name="logo-qq" size="24px" />
                            </t-button>
                        </t-tooltip>
                        <t-tooltip content="企业微信登录">
                            <t-button variant="text" shape="square" size="large">
                                <t-icon name="logo-wecom" size="24px" />
                            </t-button>
                        </t-tooltip>
                    </t-space>
                </div>
            </t-form>

            <div class="login-footer">
                <p>© 2023 广州市回声笔网络科技有限公司提供技术支持</p>
                <p>推荐使用 Chrome或Edge 浏览器访问</p>
            </div>
        </div>

        <div class="login-background">
            <div class="background-image"></div>
            <div class="background-mask"></div>
            <div class="background-content">
                <h2 class="slogan">高效 · 安全 · 智能</h2>
                <p class="description">回声笔商用系统管理后台解决方案</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    import {
        Form as TForm,
        FormItem as TFormItem,
        Input as TInput,
        Button as TButton,
        Checkbox as TCheckbox,
        Icon as TIcon,
        Link as TLink,
        Divider as TDivider,
        Space as TSpace,
        Tooltip as TTooltip,
        MessagePlugin,
        type FormRules,
    } from 'tdesign-vue-next';
    import FormInstance from 'tdesign-vue-next';
    const router = useRouter();
    const form = ref<typeof FormInstance & { validate: () => Promise<boolean> }>();
    const loading = ref(false);

    // 表单数据
    const formData = reactive({
        username: '',
        password: '',
        remember: false,
    });

    // 表单验证规则
    const rules: FormRules<LoginFormData> = {
        username: [
            { required: true, message: '请输入用户名', type: 'error' },
            { min: 3, message: '用户名不能少于3个字符', type: 'error' },
        ],
        password: [
            { required: true, message: '请输入密码', type: 'error' },
            { min: 6, message: '密码不能少于6个字符', type: 'error' },
        ],
    };

    // 定义表单数据类型
    interface LoginFormData {
        username: string;
        password: string;
        remember: boolean;
    }

    // 定义提交上下文类型
    interface SubmitContext<T> {
        e?: Event;
        validateResult: boolean | { [key in keyof T]: boolean | Array<any> };
        firstError?: string;
    }

    // 提交表单
    const onSubmit = async (context: SubmitContext<LoginFormData>) => {
        const { validateResult, firstError } = context;
        console.log('提交表单:', validateResult);
        if (validateResult === true) {
            loading.value = true;
            setTimeout(() => {
                router.replace({ name: 'home' })
            }, 1000);
        }
        //   if (validateResult === true) {
        //     try {
        //       loading.value = true;

        //       // 调用登录服务
        //       const result = await authService.login(formData.username, formData.password);

        //       if (result.success) {
        //         MessagePlugin.success('登录成功');

        //         // 如果选择了记住我，可以在这里处理
        //         if (formData.remember) {
        //           localStorage.setItem('remember_username', formData.username);
        //         } else {
        //           localStorage.removeItem('remember_username');
        //         }

        //         // 登录成功后跳转到首页
        //         router.push('/dashboard');
        //       } else {
        //         MessagePlugin.error(result.message || '登录失败，请检查用户名和密码');
        //       }
        //     } catch (error) {
        //       console.error('登录错误:', error);
        //       MessagePlugin.error('登录失败，请稍后再试');
        //     } finally {
        //       loading.value = false;
        //     }
        //   } else if (firstError) {
        //     // 显示第一个验证错误信息
        //     MessagePlugin.error(firstError);
        //   }
    };

    // 初始化时检查是否有记住的用户名
    const initRememberUsername = () => {
        const rememberedUsername = localStorage.getItem('remember_username');
        if (rememberedUsername) {
            formData.username = rememberedUsername;
            formData.remember = true;
        }
    };

    // 生命周期
    onMounted(() => {
        initRememberUsername();
    })
</script>

<style lang="less" scoped>
    .login-container {
        display: flex;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        background-color: #f5f5f5;
    }

    .login-content {
        width: 500px;
        padding: 40px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 1;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .login-header {
        margin-bottom: 40px;
    }

    .logo-container {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
    }

    .logo {
        width: 48px;
        height: 48px;
        margin-right: 16px;
    }

    .system-name {
        font-size: 24px;
        font-weight: 600;
        color: #0052d9;
        margin: 0;
    }

    .login-welcome {
        font-size: 28px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
    }

    .login-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .login-divider {
        margin: 32px 0 24px;
    }

    .other-login-methods {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
    }

    .login-footer {
        margin-top: auto;
        text-align: center;
        color: #999;
        font-size: 12px;
        line-height: 1.5;
    }

    .login-background {
        flex: 1;
        position: relative;
        overflow: hidden;
    }

    .background-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('/public/bg.png') no-repeat right center;
        background-size: cover;
        background-position: center;
        filter: blur(0px);
        transition: all 0.5s;
    }

    .background-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(0, 82, 217, 0.8), rgba(0, 83, 217, 0.414));

    }

    .background-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #ffffff;
        width: 80%;
    }

    .slogan {
        font-size: 48px;
        font-weight: 600;
        margin-bottom: 24px;
        letter-spacing: 4px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .description {
        font-size: 20px;
        opacity: 0.9;
        max-width: 600px;
        margin: 0 auto;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
        .login-content {
            width: 450px;
            padding: 30px;
        }
    }

    @media (max-width: 992px) {
        .login-container {
            flex-direction: column-reverse;
        }

        .login-content {
            width: 100%;
            height: 70%;
        }

        .login-background {
            height: 30%;
        }

        .slogan {
            font-size: 36px;
        }

        .description {
            font-size: 16px;
        }
    }

    @media (max-width: 576px) {
        .login-content {
            padding: 20px;
        }

        .login-header {
            margin-bottom: 20px;
        }

        .login-welcome {
            font-size: 24px;
        }

        .slogan {
            font-size: 28px;
        }
    }
</style>